React 1.8踩坑，模块化引入less样式不生效

2024-07-12 07:06| 来源: 网络整理| 查看: 265

在看一个 react 项目的时候，项目中是直接引入 import style from './style.less'

create-react-app 创建项目之后， react 脚手架里面是已经集成了css，sass的，先安装less，less-loader

npm install less less-loader

react 默认隐藏 webpack 配置文件。有个方法是 npm run eject 将 webpack 配置暴露出来，但操作不可逆，个人想尽量简单，所以直接改了 node_modules/react-scripts/config/webpack.config.js，这里用 npm run eject 将 webpack 配置暴露出来也是一样的配置。参考 sass 的配置在sassModuleRegex 下添加

const lessRegex = /\.less$/; const lessModuleRegex = /\.less$/;

下面这部分需要在"file" loader makes sure those assets get 上添加，也是参考sassRegex和sassModuleRegex

{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, // 用于决定css文件中读取到@import时被外层数组中哪个处理 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, mo

【本文地址】

公司简介

联系我们